<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Journey through Space: A 3rd grade science learning module</title>
        <script src="scripts/SCORM_API_wrapper.js" language="javascript"></script>
        <script src="scripts/sessionstorage.1.4.js" language="javascript"></script>
        <script src="scripts/scripts.js" language="javascript"></script>
        <script src="scripts/gaseoushsscripts.js" language="javascript"></script>
        <link href="styles/styles.css" type="text/css" rel="stylesheet"/>
        <link href="styles/hsstyles.css" type="text/css" rel="stylesheet"/>
    </head>
    
    <body onload="javascript:visitGaseous()">
        <div>
            <div>
                <table id="indextable">
                    <tr>
                        <td align="center"><img src="images/mercurytoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/venustoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/earthtoon.png" height="20px" width="20px"/></td>
                    </tr>
                        <td align="center"><img src="images/marstoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/suntoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/jupitertoon.png" height="20px" width="20px"/></td>
                    <tr>
                        <td align="center"><img src="images/saturntoon.png" height="20px" width="45px"/></td>
                        <td align="center"><img src="images/uranustoon.png" height="20px" width="30px"/></td>
                        <td align="center"><img src="images/neptunetoon.png" height="20px" width="20px"/></td>
                    </tr>
                </table>
            </div>
                            
            <div id="headerimage">
                <a name="top">
                <img src="images/header.jpg"
                    alt="image of module title - Journey through Space: a 3rd grade science learning module"
                    title="image of module title - Journey through Space: a 3rd grade science learning module"
                    width="82%"/>
                </a>
            </div>
        </div>
        
        <div id="nav">
            <div id="nav_wrapper">
                <ul>
                    <li><a class="show" href="welcome.html">Welcome!</a>
                    </li>
                    <li><a class="show" href="sun.html">The Sun</a>
                    </li>
                    <li><a class="show" href="#">Rocky Planets</a>
                        <ul>
                            <li><a class="show" href="terresterial.html">Rocky Planet Intro</a>
                            </li>
                            <li><a class="show" href="mercury.html">Mercury</a>
                            </li>
                            <li><a class="show" href="venus.html">Venus</a>
                            </li>
                            <li><a class="show" href="earth.html">Earth</a>
                            </li>
                            <li><a class="show" href="mars.html">Mars</a>
                            </li>
                            <li><a class="show" id="terresterialquizlink" href="terresterialquiz.html">Rocky Planets Quiz</a>
                            </li>
                        </ul>
                    </li>
                    <li><a class="show" href="moon.html">The Moon</a>
                    </li>
                    <li><a class="show" href="asteroid.html">Asteroid Belt</a>
                    </li>
                    <li><a class="show" href="#">Gas Giants</a>
                        <ul>
                            <li><span class="menu-link-inactive" class="show" href="gaseous.html">
                                Gas Giants Intro</span>
                            </li>
                            <li><a class="show" href="jupiter.html">Jupiter</a>
                            </li>
                            <li><a class="show" href="saturn.html">Saturn</a>
                            </li>
                            <li><a class="show" href="uranus.html">Uranus</a>
                            </li>
                            <li><a class="show" href="neptune.html">Neptune</a>
                            </li>
                            <li><a class="hide" id="gaseousquizlink" href="gaseousquiz.html">Gas Giants Quiz</a>
                            </li>
                        </ul>
                    </li>
                    <li> <a class="hide" id="finalquizlink" href="endquiz.html">Final Quiz</a>
                    </li>
                    <li> <a class="hide" id="certificate" href="certificate.html">Certificate</a>
                    </li>
                </ul>
            </div>
            <!-- Nav wrapper end -->
        </div>
        <!-- Nav end -->
        
        <div>
            <article>
                <header>
                    <table align="center">
                        <tr>
                            <th><img src="images/satelliteflip.jpg" height="50px" width="50px"/></th>
                            <th><h1>Introduction to the Gaseous Planets</h1></th>
                            <th><img src="images/satellite.jpg" height="50px" width="50px"/></th>
                        </tr>
                    </table>
                </header>
                
                <aside>
                    <table>
                        <tr>
                            <img src="images/gasgiants.jpg"
                                alt="Jupiter, Saturn, Uranus and Neptune"
                                title="Jupiter, Saturn, Uranus and Neptune"/>
                        </tr>
                        <tr>
                            <p>The 4 gaseous planets: Jupiter, Saturn, Uranus and Neptune.</p>
                        </tr> 
                        <tr>
                            <img src="images/gasgiants2.jpg"
                                alt="Size comparison of gaseous planets"
                                title="Size comparison of gaseous planets"/>
                        </tr>
                        <tr>
                            <p>Of the 4 gaseous planets, Jupiter is the largest. 
                                <em>Note: Pluto is no longer a planet.</em></p>
                        </tr> 
                    </table>
                </aside>
                
                <section>
                    <div id="transcript" class="center">
                        <audio controls>
                            <source src="audio/gaseous.mp3" type="audio/mpeg">
                            <source src="audio/gaseous.ogg" type="audio/ogg">
                            <source src="audio/gaseous.wav" type="audio/wav">
                        </audio>
                        <p><strong>Audio Transcript:</strong> Let's explore the Gaseous Planets.</p>
                    </div>
                    
                    <h3>Gas Giants Grand Vocabulary</h3>
                        <p>Hover your mouse over each item to learn its definition.</p>
                
                            <table>
                                <div id="hotspots">
                                    <tr>
                                        <td>
                                            <div class="column">
                                                <div id="hs1" class="hotspot" 
                                                    onmouseover="javascript:showText( 1 )"
                                                    onmouseout="javascript:hideOutput()"><p>Cyrovolcanoes</p></div> 
                                            </div>
                                        </td>
                                        <td>
                                            <div class="column">
                                                <div id="hs2" class="hotspot" 
                                                    onmouseover="javascript:showText( 2 )"
                                                    onmouseout="javascript:hideOutput()"><p>Density</p></div>  
                                            </div>
                                        </td>
                                        <td>             
                                            <div class="column">        
                                                <div id="hs3" class="hotspot"
                                                    onmouseover="javascript:showText( 3 )"
                                                    onmouseout="javascript:hideOutput()"><p>Galilean Satellites</p></div> 
                                            </div>
                                        </td>
                                  </tr>
                                  <tr>
                                        <td>
                                            <div class="column">
                                                <div id="hs4" class="hotspot" 
                                                    onmouseover="javascript:showText( 4 )"
                                                    onmouseout="javascript:hideOutput()"><p>Gaseous Cloud</p></div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="column">
                                                <div id="hs5" class="hotspot" 
                                                    onmouseover="javascript:showText( 5 )"
                                                    onmouseout="javascript:hideOutput()"><p>Hydrocarbons</p></div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="column">
                                                <div id="hs6" class="hotspot" 
                                                    onmouseover="javascript:showText( 6 )"
                                                    onmouseout="javascript:hideOutput()"><p>Jovian Moons</p></div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="column">
                                                <div id="hs7" class="hotspot" 
                                                    onmouseover="javascript:showText( 7 )"
                                                    onmouseout="javascript:hideOutput()"><p>Retrograde Orbit</p></div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="column">
                                                <div id="hs8" class="hotspot" 
                                                    onmouseover="javascript:showText( 8 )"
                                                    onmouseout="javascript:hideOutput()"><p>Shepard Moons</p></div>
                                            </div>
                                        </td>
                                    </tr>
                                </div>
                            </table>
                            
                                <div id="output">
                                    <div id="output-box">
                                        <p id="output-text">asdf</p>
                                    </div>
                                </div>
                    
                    <p>The four outer Gas Giants (a.k.a. Gaseous Planets) are the farthest from the Sun. 
                        These planets are Jupiter, Saturn, Uranus and Neptune. They are 
                        unique because they don’t have a surface, so you would not be able to walk on 
                        them. Their composition is made mainly of gas materials and their <em>density</em> 
                        increases towards the center of their core. They are different than the terrestrial 
                        planets because they are much larger.</p>
                
                    <a href="#top">Back to top</a>
                </section>
            </article>
        </div>
        
        <div>
            <footer>
                <cite>All information was collected from 
                    <a href="http://www.merriam-webster.com">Merriam Webster Online: 
                        Dictionary and Thesaurus</a>, 
                    <a href="http://www.nationalgeographic.com/">National Geographic</a>, 
                    <a href="http://www.wikipedia.org">Wikipedia</a>, 
                    <a href="http://www.nasa.gov">NASA</a>, 
                    Etsy - Pretty Grafik Design</a>, &amp Etsy - Paula Kim Studio</a>
                </cite>
            </footer>
        </div>
    </body>
</html>
